<template>
    <div class="container">
        <div class="ipt-search">
            <el-col :span="16" class="ipt-col">
                <el-input v-model="clinicName" size="large" class="w-50 m-2" placeholder="请输入医院名称" clearable>
                    <template #suffix>
                        <el-button @click="handleSearch">
                            <el-icon class="el-input__icon">
                                <search />
                            </el-icon>
                        </el-button>
                    </template>
                </el-input>
            </el-col>
        </div>
        <br />
        <br />
        <br />
        <div class="ipt-result">
            <el-row :gutter="1">
                <el-col :span="24">
                    <div class="ipt-clume">
                        <el-card class="ipt-card">
                            <div class="disCard">
                                <img :src="clinicList[0]?.imageUrl" width="300px" height="300px" />
                                <div class="text-content">
                                    <div class="location">
                                        诊所名：{{ clinicList[0].name }}<br />
                                        诊所地址：{{ clinicList[0].address }}<br />
                                        诊所介绍：<div class="text-container">
                                            {{ clinicList[0].detail }}
                                        </div>
                                        <br />
                                    </div>
                                    <div class="button-container">
                                        <el-button type="danger"
                                            @click="toggleVisibility(0, clinicList[0].clinicId)">查看</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                        <br />
                        <el-card class="ipt-card">
                            <div class="disCard">
                                <img :src="clinicList[1]?.imageUrl" width="300px" height="300px" />
                                <div class="text-content">
                                    <div class="location">
                                        诊所名：{{ clinicList[1].name }}<br />
                                        诊所地址：{{ clinicList[1].address }}<br />
                                        诊所介绍：<div class="text-container">
                                            {{ clinicList[1].detail }}
                                        </div>
                                        <br />
                                    </div>
                                    <div class="button-container">
                                        <el-button type="danger"
                                            @click="toggleVisibility(1, clinicList[1].clinicId)">查看</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <br />
                    <br />
                    <br />
                    <div class="ipt-clume">
                        <el-card class="ipt-card">
                            <div class="disCard">
                                <img :src="clinicList[2]?.imageUrl" width="400px" height="300px" />
                                <div class="text-content">
                                    <div class="location">
                                        诊所名：{{ clinicList[2].name }}<br />
                                        诊所地址：{{ clinicList[2].address }}<br />
                                        诊所介绍：<div class="text-container">
                                            {{ clinicList[2].detail }}
                                        </div>
                                        <br />
                                    </div>
                                    <div class="button-container">
                                        <el-button type="danger"
                                            @click="toggleVisibility(2, clinicList[2].clinicId)">查看</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                        <br />
                        <el-card class="ipt-card">
                            <div class="disCard">
                                <img :src="clinicList[3]?.imageUrl" width="300px" height="300px" />
                                <div class="text-content">
                                    <div class="location">
                                        诊所名：{{ clinicList[3].name }}<br />
                                        诊所地址：{{ clinicList[3].address }}<br />
                                        诊所介绍：<div class="text-container">
                                            {{ clinicList[3].detail }}
                                        </div>
                                        <br />
                                    </div>
                                    <div class="button-container">
                                        <el-button type="danger"
                                            @click="toggleVisibility(3, clinicList[3].clinicId)">查看</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts">
export default {
}
</script>

<script lang="ts" setup>
import { ClinicsStore, Clinic } from '@/types/clinic';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import axios from '../../utils/request.ts'
import router from '@/router/index.ts';

const clinicName = ref();
const clinicsStore = ClinicsStore();
const clinicList = clinicsStore.clinics;

const handleSearch = async () => {
    try {
        if (clinicName === null) {
            clinicsStore.setDefaultClinics;
            return
        }
        const res = await axios.get(`/clinic/like?name=` + clinicName.value);
        const { message, data } = res.data;
        if (message === 'success') {
            for (let i = 0; i < data.length; i++) {
                const c: Clinic = {
                    clinicId: data[i].id,
                    name: data[i].name,
                    detail: data[i].detail,
                    address: data[i].address,
                    imageUrl: data[i].imageUrl,
                };
                clinicList.unshift(c);
            }
            console.log('All data fetched successfully');
            return;
        } else {
            clinicsStore.setDefaultClinics;
            ElMessage.error("查询失败")
        }
    } catch (error) {
        console.error('Error in fetching data:', error);
    }
}

const toggleVisibility = async (index: number, clinic_id: number) => {
    localStorage.setItem('search_index', index.toString());
    localStorage.setItem('search_id', clinic_id.toString());
    router.push('/clinicDetail')
}

const fetchData = async () => {
    try {
        const res = await axios.get('/clinic/like?name=' + clinicName);
        const { message, data } = res.data;
        if (message === 'success') {

            console.log('All data fetched successfully');
            return;
        } else {
            clinicsStore.setDefaultClinics;
            ElMessage.error("查询失败")
        }
    } catch (error) {
        console.error('Error in fetching data:', error);
    }
}
</script>

<style scoped>
.disCard {
    display: flex;
    gap: 10px;
    /* 每段文字之间的间距 */
    font-size: 20px;
}

.ipt-search {
    display: flex;
    /* 使父容器成为 Flex 容器 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.ipt-col {
    display: flex;
    align-items: center;
    width: 240px;
}

.ipt-result {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    /* 图片和文字容器之间的间距 */
}

.ipt-clume {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.ipt-card {
    display: flex;
    /* flex-direction: row; */
    align-items: center;
    justify-content: center;
}

.text-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.container-s {
    display: flex;
    /* 启用 flex 布局 */
    flex-direction: column;
    /* 竖直排列文字段落 */
    gap: 10px;
    /* 每段文字之间的间距 */
}

.spacer {
    flex-grow: 1;
    /* 动态扩展剩余空间 */
    background-color: lightgray;
    /* 空白区颜色，仅用于示例 */
}

.text-container {
    width: 340px;
    /* 设置容器的宽度 */
    word-wrap: break-word;
    /* 自动换行 */
    word-break: break-all;
    /* 针对长单词自动断行 */
    white-space: normal;
    /* 默认情况下允许换行 */
}
</style>